import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { getTodayData } from '@/services/api/home';
function getNumber(num: number) {
  return Number.isInteger(num) ? num : num.toFixed(2) || 0;
}
const App: React.FC = () => {
  const [statistics1, setStatistics1] = useState<any>([]);
  const getTableHeader = async () => {
    const res = await getTodayData();
    let {
      result: {
        machineData,
        operateData: { totalTime, totalArea, totalOil },
      },
    } = res;
    setStatistics1([
      {
        title: '工作时长(h)',
        number: getNumber(totalTime),
        icon: 'up',
      },
      {
        title: '工作面积(亩)',
        number: getNumber(totalArea),
        icon: 'up',
      },
      {
        title: '油耗量(L)',
        number: getNumber(totalOil),
        icon: 'down',
      },
      {
        title: '故障台数(台)',
        number: machineData.faultNum || 0,
        icon: 'down',
      },
      {
        title: '农机总数',
        number: machineData.totalNum || 0,
      },
    ]);
    console.log(
      { onlineNum: machineData.onlineNum, offlineNum: machineData.offlineNum },
      machineData,
    );
    setMachine({ onlineNum: machineData.onlineNum, offlineNum: machineData.offlineNum });
  };
  useEffect(() => {
    getTableHeader();
  }, []);
  const [machine, setMachine] = useState<any>({ onlineNum: 0, offlineNum: 0 });
  return (
    <div className={styles.dateData}>
      <h2 className={'title'}>今日数据</h2>
      <ul className={'content'}>
        {statistics1.map((v: any, i: number) => {
          return (
            <li key={i} className={styles.infoItem}>
              <div>
                <div style={{ textAlign: 'left' }}>
                  <div className={styles.infoNumber}>
                    <span>{v.number} </span>
                    {v.icon &&
                      (v.icon === 'up' ? (
                        <img src={require('@/assets/up.png')} />
                      ) : (
                        <img src={require('@/assets/down.png')} />
                      ))}
                  </div>
                  <div className={styles.title}>{v?.title}</div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
      <ul className={'rightpart'}>
        <li>
          <div></div>
          在线
          <span> {machine.onlineNum} 台</span>
        </li>
        <li>
          <div></div>
          离线
          <span> {machine.offlineNum} 台</span>
        </li>
      </ul>
    </div>
  );
};

export default App;
